<template>
	<div class="message-wrapper">
        <!-- <Tabs type="card">
            <TabPane label="日志"> -->
                <div style="width:100%;background:#fff;padding:14px 14px">
                <Card>			
                    <!--标题-->
                    <p slot="title">
                        <Icon type="ios-list-outline"></Icon> 消息中心
                    </p>			
                    <!--标题end-->

                    <Collapse v-model="msgValue" accordion >
                        <Panel v-for="(item,index) in datas" :key="index">
                            <span class="message-title">{{item.title}}</span>
                            <span class="message-time">{{new Date(item.created_at).Format('yyyy-MM-dd HH:mm')}}</span> 
                            <p slot="content" class="message-content">
                                {{item.message}}
                            </p>
                        </Panel>
                    </Collapse>                         
                    <!--分页-->
                    <Page :total="total" 
                    :page-size="size" 
                    show-elevator 
                    @on-change="getMsg"
                    show-total style="text-align:center"></Page>
                    <!--分页end-->
                </Card>	
            <!-- </TabPane>
        </Tabs> -->
        </div>
	</div>
</template>	

<script>
// import util from '@/libs/util';
import { http, api } from '@/libs/http'
export default {
  name: 'message_index',
  data () {
    return {
      msgValue: '0',
      size: 20,
      total: 0,
      datas: []
    }
  },
  created () {
    this.getMsg(1)
  },
  methods: {
    getMsg (page) {
      let params = {
        limit: this.size,
        offset: this.size * (page - 1)
      }
      http.request(this, api.notifications_info, null, params, res => {
        if (res) {
          this.datas = res.rows
          this.total = res.count || 0
        }
      })
    }
  }
}
</script>

<style lang="less">
.message-wrapper {
    .message-content {
        padding-left: 30px;
    }
    .message-title {
        font-weight: bold;
    }
    .message-time {
        float: right;
        margin-right: 20px;
        font-weight: bold;
    }
}
</style>